<style scoped>
.qiehuanYanse {
  width: 120px;
  height: 50px;
  line-height: 50px;
  border: none;
}

.quanbu {
  /* 添加这个类来改变背景色 */
  background-color: red;
  color: white;
  /* 可能需要调整文字颜色以确保可读性 */
}


/*这个是列表外的盒子*/
#qiehuanHtml {
  margin: auto;
  width: 740px;
  height: 500px;
  background: #ffffff;
}
/*这个是列表外的盒子 再往里面一层，列表的盒子*/
.Divone{
  width: 130px;
  height: 200px;
  background: rgb(255, 255, 255);
  float: left;
 margin-left: 15px;
 margin-bottom: 10px;
 margin-top: 10px;
 display: flex;
 flex-wrap:wrap;
}
.Divone1{
 float: left;
 
}

.imgOne {
  width: 120px;
  height: 120px;
}
.pOne{
  font-size: 12px;
  margin-top: -0px;
}
.Divone p:nth-child(3){
  margin-top: -8px;
  margin-left: -60px;
}
#boxx{
  width: 300px;
  height: 300px;
}
#boxx div{
 
  float: left;
}
#Divone div p:nth-child(2){
  color: red;
}
.pTwo{
  color: red;
}
</style>

<template>
  <!-- 商品列表 -->
  <div class="home">
    <div class="card_button">
      <button @click="qiehuan(0)" class="qiehuanYanse" :class="{ quanbu: qiehuanHtml[0] }"
        :style="{ color: qiehuanColor[0] }">
        空调
      </button>
      <button @click="qiehuan(1)" class="qiehuanYanse" :class="{ quanbu: qiehuanHtml[1] }"
        :style="{ color: qiehuanColor[1] }">
        平板电视
      </button>
      <button @click="qiehuan(2)" class="qiehuanYanse" :class="{ quanbu: qiehuanHtml[2] }"
        :style="{ color: qiehuanColor[2] }">
        生活电器
      </button>
      <button @click="qiehuan(3)" class="qiehuanYanse" :class="{ quanbu: qiehuanHtml[3] }"
        :style="{ color: qiehuanColor[3] }">
        洗衣机
      </button>
      <button @click="qiehuan(4)" class="qiehuanYanse" :class="{ quanbu: qiehuanHtml[4] }"
        :style="{ color: qiehuanColor[4] }">
        冰箱
      </button>
      <button @click="qiehuan(5)" class="qiehuanYanse" :class="{ quanbu: qiehuanHtml[5] }"
        :style="{ color: qiehuanColor[5] }">
        厨房大电
      </button>
    </div>
    <div id="qiehuanHtml">
      <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
  <div v-for="(product, index) in products"
  :key="index"
  v-show="qiehuanHtml[index]">
  
    <img 
    :src="product.imageUrl"
    class="imgOne"
    :alt="product.alt"
  />
  <p class="pOne">{{ product.description }}</p>
  <p class="pTwo">${{ product.price }}</p>
  
  </div>
    </div>
      <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
                <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
                <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
                <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
                <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
                <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
                <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
                <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
                <!-- 多个内容面 未渲染，一下复制的是多个一样的-->
      <div class="Divone">
    
        <div v-for="(product, index) in products"
        :key="index"
        v-show="qiehuanHtml[index]">
        
          <img 
          :src="product.imageUrl"
          class="imgOne"
          :alt="product.alt"
        />
        <p class="pOne">{{ product.description }}</p>
        <p class="pTwo">${{ product.price }}</p>
        
        </div>
          </div>
      

  
      
    </div>
    <!-- 子组件 -->
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "GouWu",
  components: {
    HelloWorld,
  },
  data() {
    return {
      // 默认第一个颜色
      qiehuanColor: ["white", "black", "black", "black", "black", "black"],
      // 默认点击按钮让第一个先显示
      qiehuanHtml: [true, false, false, false, false, false], 
    
      products: [
        {
          imageUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.fd81516a06ce33c15b194494272fa6e9?rik=XAfnJ6A9NFvAyA&riu=http%3a%2f%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f2022053117%2fivhiashhpu1.jpg&ehk=Yi2aDhWvd0rnBKl1xloJy8F1RfGd8%2bcC75k4ff8dVXk%3d&risl=&pid=ImgRaw&r=0',
          alt: '商品图片描述',
          description: '杨紫同款波司登2024久啊都会发发发光IQ额u…',
          price: 4999,
        },
        {
          imageUrl: 'https://tupian.qqw21.com/article/UploadPic/2021-2/202121219531349614.jpg',
          alt: '商品图片描述',
          description: '杨紫同款波司登2024久啊都会发发发光IQ额u…',
          price: 4999,
        },
        {
          imageUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.fd81516a06ce33c15b194494272fa6e9?rik=XAfnJ6A9NFvAyA&riu=http%3a%2f%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f2022053117%2fivhiashhpu1.jpg&ehk=Yi2aDhWvd0rnBKl1xloJy8F1RfGd8%2bcC75k4ff8dVXk%3d&risl=&pid=ImgRaw&r=0',
          alt: '商品图片描述',
          description: '杨紫同款波司登2024久啊都会发发发光IQ额u…',
          price: 4999,
        },
        {
          imageUrl: 'https://tupian.qqw21.com/article/UploadPic/2021-2/202121219531349614.jpg',
          alt: '商品图片描述',
          description: '杨紫同款波司登2024久啊都会发发发光IQ额u…',
          price: 4999,
        },
        {
          imageUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.fd81516a06ce33c15b194494272fa6e9?rik=XAfnJ6A9NFvAyA&riu=http%3a%2f%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f2022053117%2fivhiashhpu1.jpg&ehk=Yi2aDhWvd0rnBKl1xloJy8F1RfGd8%2bcC75k4ff8dVXk%3d&risl=&pid=ImgRaw&r=0',
          alt: '商品图片描述',
          description: '杨紫同款波司登2024久啊都会发发发光IQ额u…',
          price: 4999,
        },
        {
          imageUrl: 'https://tupian.qqw21.com/article/UploadPic/2021-2/202121219531349614.jpg',
          alt: '商品图片描述',
          description: '杨紫同款波司登2024久啊都会发发发光IQ额u…',
          price: 4999,
        },
        // 更多商品对象...
      ],
      
    };
  },
  methods: {
    qiehuan(index) {
      this.qiehuanHtml = Array(5).fill(false); // 先重置所有项为false
      this.qiehuanHtml[index] = true; // 再将当前点击的项设置为true

      // 更新颜色状态
      this.qiehuanColor = this.qiehuanColor.map((color, i) =>
        i === index ? "white" : "black"
      );

      // 切换当前显示的卡片
      this.qiehuanHtml = this.qiehuanHtml.map((show, i) => i === index);
    },
  },
};
</script>